<template>
  <view class="page">
    <uni-nav-bar ref="navBar" fixed statusBar title="订单详情" :border="false" backgroundColor="#ffffff"
      @clickLeft="goBack">
      <template v-slot:left>
        <image src="@/static/svg/publicSvg/icon-back.svg" />
      </template>
    </uni-nav-bar>
    <view class="detail-box">
      <view class="detail-top flex item-center justify-between">
        <view class="goods-name ">
          <view>订单编号：{{detail.subOrderNo}}</view>
          <view class="goods-price" style="margin-top: 6px;">下单人：{{detail.orderMobile}}</view>
        </view>
        <view class="goods-price">
          {{getStatus(detail.subOrderState)}}
        </view>
      </view>
      <view class=" detail-top">
        <view class="flex">
          <image :src="detail.goodsImgs" mode="" class="goods-img"></image>
          <view class="goods-dec flex-col justify-between">
            <view class="goods-name">{{detail.goodsName}}</view>
            <view class="goods-price red-color flex flex-r-r">¥{{detail.goodsPrice}}</view>
            <view class="goods-price block-color flex flex-r-r">x 1</view>
          </view>
        </view>
        <view class="">
          <view v-if="detail.orderType == 1">
            <view class="dec-font flex item-center justify-between margin-t-10">
              <view>商品总价：</view>
              <view>¥ {{detail.goodsPrice}}</view>
            </view>
            <view class="dec-font flex item-center justify-between margin-t-10">
              <view>订单收入：</view>
              <view class="red-color">¥ {{detail.merchantAmt}}</view>
            </view>
            <view class="dec-font flex item-center justify-between margin-t-10">
              <view>补贴收入：</view>
              <view class="red-color">¥ {{detail.totalSubsidyAmt}}</view>
            </view>
          </view>
          <view class="dec-font flex item-center justify-between margin-t-10">
            <view>合计：</view>
            <view class="red-color total-amt">¥ {{detail.totalAmt}}</view>
          </view>
        </view>
      </view>
      <view v-if="detail.orderType == 2 && (detail.orderEnrollInfos && detail.orderEnrollInfos.length)">
        <view class="detail-title">报名信息</view>
        <view class="detail-top">
          <view class="flex goods-no" v-for="item in detail.orderEnrollInfos" :key="item.value">
            <view class="flex gary-color">
              <view class="goods-no-title">{{item.title}}</view>：
            </view>
            <text style="margin-left: 10px;">{{item.value}}</text>
          </view>
          <!-- <view class="flex goods-no"><view class="flex gary-color"><view class="goods-no-title">联系电话</view>：</view>{{detail.subOrderNo}}</view> -->
          <!-- <view class="flex goods-no"><view class="flex gary-color"><view class="goods-no-title">性别</view>：</view>{{detail.subOrderNo}}</view> -->
        </view>

      </view>
      <view class="detail-title">订单信息</view>
      <view class="detail-top">
        <view class="flex item-center justify-between goods-no">
          <view class="order-info-title">下单时间：</view>
          <view>{{detail.orderTime}}</view>
        </view>
        <view class="flex item-center justify-between goods-no">
          <view class="order-info-title">支付时间：</view>
          <view>{{detail.payTime}}</view>
        </view>
        <view class="flex item-center justify-between goods-no">
          <view class="order-info-title">核销时间：</view>
          <view>{{detail.verifyTime}}</view>
        </view>
        <view class="flex item-center justify-between goods-no">
          <view class="order-info-title">策划人：</view>
          <view>{{detail.businessName}}</view>
        </view>
        <view class="flex item-center justify-between goods-no">
          <view class="order-info-title">来源活动：</view>
          <view>{{detail.activeTitle}}</view>
        </view>
      </view>

      <view class="release-btn"
        v-if="detail.orderType == 2 && (detail.orderEnrollInfos && detail.orderEnrollInfos.length) && (userInfo && userInfo.merchantName.indexOf('万商') !== -1)"
        @click="print" style="margin-top: 48rpx;">重新打印</view>
    </view>
    <view class="k-page"> </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getOrderDetail,
    printEnrollInfo
  } from '@/api/order.js'
  import {
    ref,
    onMounted,
    reactive
  } from 'vue'
  import {
    getOrderStatus
  } from '@/utils/index.js'
  import {
    useUserStore
  } from '@/stores/modules/user.js'
  const userStore = useUserStore()
  const userInfo = userStore.userInfo
  console.log(userInfo.merchantName)
  const decId = ref(null)
  const detail = ref({})
  const goBack = () => {
    if (getCurrentPages().length === 1) {
      uni.reLaunch({
        url: "/homePages/pages/home/home"
      });
      return;
    }
    uni.navigateBack()
  }
  const getDetail = async () => {
    let result = await getOrderDetail({
      id: decId.value
    })
    if (result) {
      detail.value = result
    }
  }
  const getStatus = (status) => {
    return getOrderStatus(status)
  }

  const print = async () => {
    uni.showLoading()
    // 打印报名信息
    printEnrollInfo({
      verifyCode: detail.value.verifyCode
    }).then(res => {
      uni.hideLoading()
      uni.showToast({
        icon: 'none',
        title: '打印成功'
      })
    }).catch(err => {
      uni.hideLoading()
      uni.showToast({
        icon: 'none',
        title: err.message
      })
    })
  }

  onLoad(({
    id
  }) => {
    if (id) {
      decId.value = id
      getDetail()
    }
  })
</script>

<style lang="scss" scoped>
  .detail-box {
    margin: 20px;

    .detail-top {
      background-color: #ffffff;
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .goods-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0px;
      color: rgba(51, 51, 51, 1);
      width: calc(100% - 58px);
    }

    .goods-price {
      font-size: 12px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      color: rgba(51, 51, 51, 0.6);
    }

    .goods-img {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }

    .goods-dec {
      width: calc(100% - 80px);
      margin-left: 20px;
    }

    .goods-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0px;
      color: rgba(51, 51, 51, 1);
      width: calc(100% - 58px);
    }

    .red-color {
      color: rgba(250, 69, 67, 1);
    }

    .block-color {
      color: rgba(51, 51, 51, 1);
    }

    .dec-font {
      font-size: 14px;
    }
  }

  .margin-t-10 {
    margin-top: 6px;
  }

  .total-amt {
    font-size: 16px;
    font-weight: 600;
  }

  .detail-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .goods-no {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    color: rgba(51, 51, 51, 0.6);
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0px;
    }
  }

  .goods-no-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: justify;
    text-align-last: justify;
    width: 60px;
    color: rgba(51, 51, 51, 1);
  }

  .gary-color {
    color: rgba(51, 51, 51, 1);
  }

  .order-info-title {
    min-width: 100px;
    color: rgba(51, 51, 51, 1);
  }

  .k-page {
    height: 100px;
  }

  .release-btn {
    // width: 343px;
    height: 46px;
    padding: 12px, 20px, 12px, 20px;
    border-radius: 8px;
    // gap: 10px;
    background: #FA4543;
    color: #ffffff;
    // margin: 10px 20px;
    text-align: center;
    line-height: 46px;
  }
</style>